@using Orchard.Liquid.ViewModels;
@model LiquidPartViewModel

<script asp-src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.js" depends-on="admin" at="Foot"></script>
<script asp-src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.min.js" at="Foot"></script>

<script asp-src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/mode/simple.min.js" at="Foot"></script>
<script asp-src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/mode/multiplex.min.js" at="Foot"></script>
<script asp-src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/xml/xml.min.js" at="Foot"></script>

<script asp-src="/Orchard.Liquid/codemirror/liquid.js" at="Foot"></script>

<fieldset class="form-group">
    <label asp-for="Liquid">@T["Body"]</label>
    <textarea asp-for="Liquid" rows="5" class="form-control content-preview-text"></textarea>
    <span class="hint">@T["The body of the content item, in Liquid format."]</span>
</fieldset>

<script at="Foot">
$(function () {
    var editor = CodeMirror.fromTextArea(document.getElementById('@Html.IdFor(x => x.Liquid)'), {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: { name: "liquid" },
      });

    editor.on('change', function (cm) {
        document.getElementById('@Html.IdFor(x => x.Liquid)').value = cm.getValue();
        $(document).trigger('contentpreview:render');
    });
});
</script>
